<template>
    <div class="feedback-container">
      <div class="feedback-buttons">
        <button
          class="feedback-button like"
          :class="{ active: currentFeedback === 'like' }"
          @click="handleFeedback('like')"
          :disabled="loading"
        >
          👍 {{ likeCount }}
        </button>
        
        <button
          class="feedback-button dislike"
          :class="{ active: currentFeedback === 'dislike' }"
          @click="handleFeedback('dislike')"
          :disabled="loading"
        >
          👎 {{ dislikeCount }}
        </button>
      </div>
  
      <div v-if="error" class="error-message">
        {{ error }}
      </div>
    </div>
  </template>
  
  <script lang="ts">
  import { Component, Prop, Vue } from 'vue-property-decorator';
  import { namespace } from 'vuex-class';

  
  const chatModule = namespace('chat');
  
  @Component
  export default class MessageFeedback extends Vue {
    @Prop({ required: true }) messageId!: string;
    @Prop() currentFeedback!: 'like' | 'dislike' | null;
  
    loading = false;
    error = '';
    likeCount = 0;
    dislikeCount = 0;
  
    @chatModule.Action submitFeedback!: (payload: {
      messageId: string;
      rating: string | null;
    }) => Promise<void>;
  
    async handleFeedback(rating: 'like' | 'dislike') {
      if (this.loading) return;
  
      this.loading = true;
      this.error = '';
  
      try {
        const newRating = this.currentFeedback === rating ? null : rating;
        await this.submitFeedback({
          messageId: this.messageId,
          rating: newRating
        });
  
        // 更新本地计数
        if (newRating === 'like') {
          this.likeCount += this.currentFeedback === 'like' ? -1 : 1;
          this.dislikeCount -= this.currentFeedback === 'dislike' ? 1 : 0;
        } else if (newRating === 'dislike') {
          this.dislikeCount += this.currentFeedback === 'dislike' ? -1 : 1;
          this.likeCount -= this.currentFeedback === 'like' ? 1 : 0;
        }
      } catch (error) {
        this.error = error instanceof Error ? error.message : 'Feedback failed';
      } finally {
        this.loading = false;
      }
    }
  }
  </script>
  
  <style scoped>
  .feedback-container {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eee;
  }
  
  .feedback-buttons {
    display: flex;
    gap: 8px;
    margin-top: 4px;
  }
  
  .feedback-button {
    padding: 4px 8px;
    border: 1px solid #ddd;
    border-radius: 16px;
    background: none;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 4px;
  }
  
  .feedback-button:hover {
    background: #f5f5f5;
  }
  
  .feedback-button.active.like {
    background: #e3f2fd;
    border-color: #64b5f6;
    color: #1976d2;
  }
  
  .feedback-button.active.dislike {
    background: #ffebee;
    border-color: #ef9a9a;
    color: #d32f2f;
  }
  
  .error-message {
    color: #d32f2f;
    font-size: 0.8em;
    margin-top: 4px;
  }
  </style>